Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add slider button component #2046

Merged
merged 9 commits into from
Dec 15, 2020
Merged

Add slider button component #2046

merged 9 commits into from
Dec 15, 2020

Conversation

tlip
Copy link
Contributor

@tlip tlip commented Dec 4, 2020

Description

This pull request introduces a SliderButton component. SliderButton implements the following design:
image

Checklist

  • There is a related GitHub issue
  • Tests are included if applicable
  • Any added code is fully documented

Issue

Resolves Issue #2027

@tlip tlip requested a review from a team as a code owner December 4, 2020 23:40
estebanmino
estebanmino approved these changes Dec 11, 2020
View reviewed changes
Copy link
Contributor

@estebanmino estebanmino left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@wachunei
Copy link
Member

I made a snack so reviewing in a real device is easier: https://snack.expo.io/@wachunei/sliderbutton

Looks good to me, however I think there are two important improvements to be made:

  • Add a disabled prop: Forbids the gesture to begin and also resets an ongoing gesture (as if the gesture was released)
  • Allow to release away: a common pattern in gestures is to move away and release in order to cancel the action (most commonly a press), this is the current behavior but only when the end is not reached, reaching the end and moving away should cancel as well. (they call it cancel-ability in https://reactnative.dev/docs/gesture-responder-system#best-practices)

This might be an extremely rare edge case but onComplete should force the final state (push the slider all the way to the end) to avoid something like this, a complete state with the slider half-way:

Screen Shot 2020-12-11 at 16 26 49

wachunei
wachunei approved these changes Dec 15, 2020
View reviewed changes
Copy link
Member

@wachunei wachunei left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, I'm going to merge into #2060

@wachunei wachunei merged commit 87e57cc into feature/swaps-quotes-view Dec 15, 2020
@wachunei wachunei deleted the issue-2027-slider-button-component branch December 15, 2020 19:37
estebanmino added a commit that referenced this pull request Jan 21, 2021
@estebanmino @wachunei
@flamingyawn @tlip
MetaSwaps Alpha (#2060)
e5fae8d 
* Squashed commit of the following:

commit d552524
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Tue Nov 17 14:05:22 2020 -0300

    Remove unnecessary styling

commit 24b5456
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Tue Nov 17 13:13:16 2020 -0300

    Update tokens dependency for effect

commit 1662700
Author: Esteban Mino <efmino@uc.cl>
Date:   Tue Nov 17 12:50:48 2020 -0300

    bumpcontrollers

commit 94a14dd
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Mon Nov 16 13:52:01 2020 -0300

    Update main navigation snapshot

commit f9ba8af
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Mon Nov 16 13:43:14 2020 -0300

    Add TokenSelectButton label prop to test

commit 637452f
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Mon Nov 16 13:34:37 2020 -0300

    Add i18n to swaps amount view

commit 6dfd9a4
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Fri Nov 13 15:52:21 2020 -0300

    Fix TokenIcon border radius

commit 54c17c2
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Fri Nov 13 13:30:16 2020 -0300

    Remove unused key in token search for swaps

commit 4bb4bcb
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Thu Nov 12 23:30:58 2020 -0300

    Add asset balance in swaps amount view

commit b262b4e
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Thu Nov 12 22:48:36 2020 -0300

    Add token balances in token search modal list

commit 6ca34c9
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Thu Nov 12 14:04:33 2020 -0300

    Add invalid decimal warning

commit 539d1e7
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Wed Nov 11 23:11:26 2020 -0300

    Add empty list message and clear search on modal hide

commit 65a31a6
Author: Esteban Mino <efmino@uc.cl>
Date:   Wed Nov 11 22:00:20 2020 -0300

    bumpcontrollers

commit 36a2289
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Wed Nov 11 19:18:40 2020 -0300

    Update Receiver Modal snapshot, it uses ModalHandler now

commit c69c414
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Wed Nov 11 19:13:31 2020 -0300

    Add tokens from SwapsController

commit 4f4e87f
Author: Esteban Mino <efmino@uc.cl>
Date:   Tue Nov 10 21:57:42 2020 -0300

    inception

commit 2367393
Author: Esteban Mino <efmino@uc.cl>
Date:   Tue Nov 10 19:09:15 2020 -0300

    package

commit 707b491
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Wed Nov 11 17:49:41 2020 -0300

    Add Initial Token Selector with dummy tokens

commit 8644be0
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Tue Nov 10 12:40:34 2020 -0300

    Switch Swaps feature flag to false

commit 0696f10
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Mon Nov 9 20:40:44 2020 -0300

    Add Keypad rules and swap token button

commit 3173290
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Fri Nov 6 17:08:56 2020 -0300

    Update snapshot for main nav

commit 5f03198
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Fri Nov 6 12:41:01 2020 -0300

    Add SWAPS.ACTIVE flag

* Disable flag

* Remove console.log

* Fix linting

* bump and getch quotes

* bump

* bump

* fetchingcorrectly

* fetchQuotesfetchQuotes

* Use SwapsController state

* Add initial generic error view

* bumpcontroller

* Add swaps app utils

* Add ratio and values from top quote

* bump

* bump

* bump

* effect

* Add gas price

* Remove console.log

* Add quotes modal and i18n

* tradefees

* bump

* tradefees

* orderedtradesfees

* bump

* bumpcontrolker

* snaps

* walletaddress

* bump

* bump

* quotevalues

* Order quotes by overall quote value

* Add enable asset text row

* bump

* bump

* 500

* Swaps amount view: use max for tokens (#2052)

* Add slider button component (#2046)

* Add slider buttons and useBalance

useBalance should be used to show balance alerts

* detecting

* bump

* REVERTTHISVALIDATION

* Add Alert component (#2061)

* Add balance alert to quotes view

* fixsendto

* networkfix

* Fix use max handler usecallback deps

* Add Slippage Slider Component (#2068)

Co-authored-by: Pedro Pablo Aste Kompen <wachunei@gmail.com>

* controllers

* circle

* circlerevert

* 9

* bumpcontrollers

* CURRENT_PROJECT_VERSION

* Refactor slider button

* Add visual feedback

- Nav title
- Spacing
- Text color and size

* Adjust token symbol text colors

* Update ios/MetaMask.xcodeproj/project.pbxproj

* Update ios/MetaMask.xcodeproj/project.pbxproj

* Fix SliderButton infinite effect

* Update ios/MetaMask.xcodeproj/project.pbxproj

* Update ios/MetaMask.xcodeproj/project.pbxproj

* gasprice

* 561

* Make onComplete optional

* averagegas

* 42

* Add touchable ratio switcher

* Add default 3% slippage constant

* Add fee variable to fee modal

* Add hitSlop area to modal close buttons

* Add quotes overview string

* Add error views styling

* merge

* networkupdated

Co-authored-by: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Co-authored-by: tlip <flamingYawn@users.noreply.github.com>
Co-authored-by: tlip <11626601+tlip@users.noreply.github.com>
ejwessel added a commit that referenced this pull request Feb 2, 2021
@ejwessel @wachunei
@estebanmino @flamingyawn @tlip
Swaps: Swap Metrics (#2150)
7955b90 
* Squashed commit of the following:

commit d552524
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Tue Nov 17 14:05:22 2020 -0300

    Remove unnecessary styling

commit 24b5456
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Tue Nov 17 13:13:16 2020 -0300

    Update tokens dependency for effect

commit 1662700
Author: Esteban Mino <efmino@uc.cl>
Date:   Tue Nov 17 12:50:48 2020 -0300

    bumpcontrollers

commit 94a14dd
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Mon Nov 16 13:52:01 2020 -0300

    Update main navigation snapshot

commit f9ba8af
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Mon Nov 16 13:43:14 2020 -0300

    Add TokenSelectButton label prop to test

commit 637452f
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Mon Nov 16 13:34:37 2020 -0300

    Add i18n to swaps amount view

commit 6dfd9a4
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Fri Nov 13 15:52:21 2020 -0300

    Fix TokenIcon border radius

commit 54c17c2
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Fri Nov 13 13:30:16 2020 -0300

    Remove unused key in token search for swaps

commit 4bb4bcb
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Thu Nov 12 23:30:58 2020 -0300

    Add asset balance in swaps amount view

commit b262b4e
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Thu Nov 12 22:48:36 2020 -0300

    Add token balances in token search modal list

commit 6ca34c9
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Thu Nov 12 14:04:33 2020 -0300

    Add invalid decimal warning

commit 539d1e7
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Wed Nov 11 23:11:26 2020 -0300

    Add empty list message and clear search on modal hide

commit 65a31a6
Author: Esteban Mino <efmino@uc.cl>
Date:   Wed Nov 11 22:00:20 2020 -0300

    bumpcontrollers

commit 36a2289
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Wed Nov 11 19:18:40 2020 -0300

    Update Receiver Modal snapshot, it uses ModalHandler now

commit c69c414
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Wed Nov 11 19:13:31 2020 -0300

    Add tokens from SwapsController

commit 4f4e87f
Author: Esteban Mino <efmino@uc.cl>
Date:   Tue Nov 10 21:57:42 2020 -0300

    inception

commit 2367393
Author: Esteban Mino <efmino@uc.cl>
Date:   Tue Nov 10 19:09:15 2020 -0300

    package

commit 707b491
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Wed Nov 11 17:49:41 2020 -0300

    Add Initial Token Selector with dummy tokens

commit 8644be0
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Tue Nov 10 12:40:34 2020 -0300

    Switch Swaps feature flag to false

commit 0696f10
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Mon Nov 9 20:40:44 2020 -0300

    Add Keypad rules and swap token button

commit 3173290
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Fri Nov 6 17:08:56 2020 -0300

    Update snapshot for main nav

commit 5f03198
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Fri Nov 6 12:41:01 2020 -0300

    Add SWAPS.ACTIVE flag

* Disable flag

* Remove console.log

* Fix linting

* bump and getch quotes

* bump

* bump

* fetchingcorrectly

* fetchQuotesfetchQuotes

* Use SwapsController state

* Add initial generic error view

* bumpcontroller

* Add swaps app utils

* Add ratio and values from top quote

* bump

* bump

* bump

* effect

* Add gas price

* Remove console.log

* Add quotes modal and i18n

* tradefees

* bump

* tradefees

* orderedtradesfees

* bump

* bumpcontrolker

* snaps

* walletaddress

* bump

* bump

* quotevalues

* Order quotes by overall quote value

* Add enable asset text row

* bump

* bump

* 500

* Swaps amount view: use max for tokens (#2052)

* Add slider button component (#2046)

* Add slider buttons and useBalance

useBalance should be used to show balance alerts

* detecting

* bump

* REVERTTHISVALIDATION

* Add Alert component (#2061)

* Add balance alert to quotes view

* fixsendto

* networkfix

* Fix use max handler usecallback deps

* Add Slippage Slider Component (#2068)

Co-authored-by: Pedro Pablo Aste Kompen <wachunei@gmail.com>

* controllers

* circle

* circlerevert

* 9

* bumpcontrollers

* CURRENT_PROJECT_VERSION

* Refactor slider button

* Add visual feedback

- Nav title
- Spacing
- Text color and size

* Adjust token symbol text colors

* Update ios/MetaMask.xcodeproj/project.pbxproj

* Update ios/MetaMask.xcodeproj/project.pbxproj

* Fix SliderButton infinite effect

* Update ios/MetaMask.xcodeproj/project.pbxproj

* Update ios/MetaMask.xcodeproj/project.pbxproj

* gasprice

* 561

* Make onComplete optional

* averagegas

* 42

* Add touchable ratio switcher

* Add default 3% slippage constant

* Add fee variable to fee modal

* Add hitSlop area to modal close buttons

* Add quotes overview string

* Add error views styling

* Metaswap Metrics

* Add Swap Actions

* move swap actions to names; actions are wip

* add analytics event opt

* merge

* networkupdated

* publish swap open metric

* logstomixpanel

* moredev

* remove depdendency on initialSource

* add back depdendency on initialSource to prevent multi publish

* add quote view metrics

* checkpoint for quotes received

* quotes received metrics

* quotes timeout metric

* remove console log

* add metric to quotes modal opening, no data sent

* publish quotes modal with data

* swaps started metrics

* update timed out and no quotes available metrics

* fix broken styling

* remove param

* handle custom slippage detection

* update swaps opened view metric and custom slippage

* update request type data point in metrics

* datapoint all available quotes

* other quote selected data point

* available quotes and remove console log

* available quotes metric

* additional data point

* move quotes received metric

* added best quote source for quotes received

* max fetch time for all quotes

* request type order for modal view

* add InteractionManager

* remove metrics from quotes modal

* remove commented out lines

* add param to nav bar

* publish cancel quote metrics on dismissal of quote request

* publish response time for cancellation

* run after interactions

* use callbacks

* detect when user has backed out before a trade has been selected

* handle navigation param

* implement feedback

* fix inconsistencies in metrics

* comments for react-hooks/exhaustive-dep disabled

* add state for request and received

Co-authored-by: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Co-authored-by: Esteban Mino <efmino@uc.cl>
Co-authored-by: tlip <flamingYawn@users.noreply.github.com>
Co-authored-by: tlip <11626601+tlip@users.noreply.github.com>
rickycodes pushed a commit that referenced this pull request Jan 31, 2022
@estebanmino @wachunei
@flamingyawn @tlip
MetaSwaps Alpha (#2060)
f26a383 
* Squashed commit of the following:

commit d552524
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Tue Nov 17 14:05:22 2020 -0300

    Remove unnecessary styling

commit 24b5456
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Tue Nov 17 13:13:16 2020 -0300

    Update tokens dependency for effect

commit 1662700
Author: Esteban Mino <efmino@uc.cl>
Date:   Tue Nov 17 12:50:48 2020 -0300

    bumpcontrollers

commit 94a14dd
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Mon Nov 16 13:52:01 2020 -0300

    Update main navigation snapshot

commit f9ba8af
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Mon Nov 16 13:43:14 2020 -0300

    Add TokenSelectButton label prop to test

commit 637452f
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Mon Nov 16 13:34:37 2020 -0300

    Add i18n to swaps amount view

commit 6dfd9a4
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Fri Nov 13 15:52:21 2020 -0300

    Fix TokenIcon border radius

commit 54c17c2
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Fri Nov 13 13:30:16 2020 -0300

    Remove unused key in token search for swaps

commit 4bb4bcb
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Thu Nov 12 23:30:58 2020 -0300

    Add asset balance in swaps amount view

commit b262b4e
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Thu Nov 12 22:48:36 2020 -0300

    Add token balances in token search modal list

commit 6ca34c9
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Thu Nov 12 14:04:33 2020 -0300

    Add invalid decimal warning

commit 539d1e7
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Wed Nov 11 23:11:26 2020 -0300

    Add empty list message and clear search on modal hide

commit 65a31a6
Author: Esteban Mino <efmino@uc.cl>
Date:   Wed Nov 11 22:00:20 2020 -0300

    bumpcontrollers

commit 36a2289
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Wed Nov 11 19:18:40 2020 -0300

    Update Receiver Modal snapshot, it uses ModalHandler now

commit c69c414
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Wed Nov 11 19:13:31 2020 -0300

    Add tokens from SwapsController

commit 4f4e87f
Author: Esteban Mino <efmino@uc.cl>
Date:   Tue Nov 10 21:57:42 2020 -0300

    inception

commit 2367393
Author: Esteban Mino <efmino@uc.cl>
Date:   Tue Nov 10 19:09:15 2020 -0300

    package

commit 707b491
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Wed Nov 11 17:49:41 2020 -0300

    Add Initial Token Selector with dummy tokens

commit 8644be0
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Tue Nov 10 12:40:34 2020 -0300

    Switch Swaps feature flag to false

commit 0696f10
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Mon Nov 9 20:40:44 2020 -0300

    Add Keypad rules and swap token button

commit 3173290
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Fri Nov 6 17:08:56 2020 -0300

    Update snapshot for main nav

commit 5f03198
Author: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Date:   Fri Nov 6 12:41:01 2020 -0300

    Add SWAPS.ACTIVE flag

* Disable flag

* Remove console.log

* Fix linting

* bump and getch quotes

* bump

* bump

* fetchingcorrectly

* fetchQuotesfetchQuotes

* Use SwapsController state

* Add initial generic error view

* bumpcontroller

* Add swaps app utils

* Add ratio and values from top quote

* bump

* bump

* bump

* effect

* Add gas price

* Remove console.log

* Add quotes modal and i18n

* tradefees

* bump

* tradefees

* orderedtradesfees

* bump

* bumpcontrolker

* snaps

* walletaddress

* bump

* bump

* quotevalues

* Order quotes by overall quote value

* Add enable asset text row

* bump

* bump

* 500

* Swaps amount view: use max for tokens (#2052)

* Add slider button component (#2046)

* Add slider buttons and useBalance

useBalance should be used to show balance alerts

* detecting

* bump

* REVERTTHISVALIDATION

* Add Alert component (#2061)

* Add balance alert to quotes view

* fixsendto

* networkfix

* Fix use max handler usecallback deps

* Add Slippage Slider Component (#2068)

Co-authored-by: Pedro Pablo Aste Kompen <wachunei@gmail.com>

* controllers

* circle

* circlerevert

* 9

* bumpcontrollers

* CURRENT_PROJECT_VERSION

* Refactor slider button

* Add visual feedback

- Nav title
- Spacing
- Text color and size

* Adjust token symbol text colors

* Update ios/MetaMask.xcodeproj/project.pbxproj

* Update ios/MetaMask.xcodeproj/project.pbxproj

* Fix SliderButton infinite effect

* Update ios/MetaMask.xcodeproj/project.pbxproj

* Update ios/MetaMask.xcodeproj/project.pbxproj

* gasprice

* 561

* Make onComplete optional

* averagegas

* 42

* Add touchable ratio switcher

* Add default 3% slippage constant

* Add fee variable to fee modal

* Add hitSlop area to modal close buttons

* Add quotes overview string

* Add error views styling

* merge

* networkupdated

Co-authored-by: Pedro Pablo Aste Kompen <wachunei@gmail.com>
Co-authored-by: tlip <flamingYawn@users.noreply.github.com>
Co-authored-by: tlip <11626601+tlip@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@wachunei wachunei wachunei approved these changes

@estebanmino estebanmino estebanmino approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@tlip @wachunei @estebanmino